<template>
  <div class="orderCenter">
    <van-tabs
      v-model="tabActive"
      @change="tabChange"
      :before-change="beforeChange"
    >
      <van-tab title="出售中"></van-tab>
      <van-tab title="纠纷中"></van-tab>
      <van-tab title="已完成"></van-tab>
      <van-tab title="已下架"></van-tab>
    </van-tabs>
    <div class="orderCetner-list-wrapper" :style="`height: ${listHeight}px`">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多"
        @load="onLoad"
        :immediate-check="false"
      >
        <Order
          v-for="order in orderList"
          :key="order.id"
          :type="orderType"
          :data="order"
          @soldOut="soldOut"
          @showcode="showcode"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import Order from '@/components/order'
import { soldOut_post } from '@/api/front/goods'
import { stockList_get, h5OrderInfo_get } from '@/api/front/goods/h5'
import { ImagePreview, Dialog } from 'vant'
import copy from 'copy-to-clipboard'
const size = 10
let page = 1
const TABS_STATUS = [1, 0, 1, 0]
export default {
  name: 'orderCenter',
  components: {
    Order
  },
  data () {
    return {
      tabActive: 0,
      message: '',
      listHeight: 0,
      orderList: [],
      total: 0,
      loading: false,
      hasInit: false
    }
  },
  computed: {
    finished () {
      console.log(!!this.hasInit && this.orderList.length >= this.total)
      return !!this.hasInit && this.orderList.length >= this.total
    },
    orderType () {
      switch (this.tabActive) {
        case 0:
          return 'selling'
        case 1:
          return 'issue'
        case 2:
          return 'complete'
        default:
          return 'off'
      }
    }
  },
  watch: {

  },
  mounted () {
    // this.getList(TABS_STATUS[this.tabActive])
    const mainTabbar = document.querySelector('.main-tabbar')
    this.listHeight = window.innerHeight - mainTabbar.offsetHeight - 44

    // 加载
    this.onLoad()
  },
  destroyed () {
    console.log('destroyed')
    this.initData()
  },
  methods: {
    initData () {
      this.orderList = []
      this.total = 0
      this.loading = false
      this.hasInit = false
      page = 1
    },
    onLoad () {
      console.log('onLoad')
      this.getList(TABS_STATUS[this.tabActive])
    },
    tabChange (v) {
      console.log('tabChange', v)
      this.initData()
      this.onLoad()
    },
    getList (status) {
      const d = {
        size,
        page
      }

      d.status = status

      // 根据类型选择请求接口
      let getStockList = h5OrderInfo_get
      console.log('orderType', this.orderType)
      if (this.orderType === 'selling' || this.orderType === 'off') {
        getStockList = stockList_get
      }

      if (!this.hasInit || this.orderList.length < this.total) {
        this.loading = true
        getStockList({
          data: d
        })
          .then((res) => {
            this.orderList = [...this.orderList, ...res.records]
            this.total = res.total
            page++
          })
          .finally(() => {
            this.loading = false
            this.hasInit = true
          })
      }
    },
    // 下架
    soldOut (id) {
      soldOut_post({
        data: {
          id
        },
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        this.initData()
        this.getList(TABS_STATUS[this.tabActive])
      })
    },
    // 查看券码
    showcode (data) {
      // const imgExts = ['jpg', 'jpeg', 'png', 'gif']
      // const ext = text.split('.').pop().toLowerCase()
      if (data.cardType === 2) {
        ImagePreview([data.cardVData.cardValue])
      } else {
        this.showTextCode(data.cardVData)
      }
    },
    beforeChange () {
      return !this.loading
    },
    copyText (code, successMsg) {
      copy(code)
      this.$notify({
        message: successMsg,
        type: 'success',
      })
    },
    showTextCode (cardVData) {
      window.copyTextFn = this.copyText

      let mesg = cardVData.cardValue.indexOf('http') === 0 ? `<a href="${cardVData.cardValue}" target="_blank" style="color: #1989fa">${cardVData.cardValue}</a>` : `<div onClick="copyTextFn('${cardVData.cardValue}', '卡号复制成功')">卡号：${cardVData.cardValue}</div>`
      if (cardVData.cardPwd) {
        mesg = `<div onClick="copyTextFn('${cardVData.cardValue}', '卡号复制成功')">卡号：${cardVData.cardValue}</div>
          <div onClick="copyTextFn('${cardVData.cardPwd}', '卡密复制成功')">卡密：${cardVData.cardPwd}</div>
        `
      }

      Dialog.confirm({
        title: '查看券码',
        message: `<div class="dialog_cardVData_wrapper">
                    <div class="dialog_cardVData">
                    ${mesg}
                    </div>
                    <span style="text-align: left;">点击卡号或卡密即可复制</span>
                  </div>`,
        showCancelButton: false,
        cancelButtonText: '复制',
        theme: 'round-button',
        allowHtml: true,
        beforeClose: (action, done) => {
          console.log(action)
          if (action === 'cancel') {
            this.copyText(cardVData.cardValue, '卡号已复制')
            done(false)
          } else {
            done()
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped src="./styles/index.scss"></style>
